<script lang="ts" setup>
import { getGamesImg } from "@/utils";

defineOptions({
  name: "Slider",
});

withDefaults(
  defineProps<{
    title?: string;
    data?: any[];
    size?: string;
    showMore?: boolean;
  }>(),
  {
    title: "",
    data: () => [],
    size: "normal",
    showMore: false,
  }
);

const emits = defineEmits<{
  (e: "clickTitle"): void;
}>();
const router = useRouter();

// const { play } = usePlay();
const jumpToDetail = (game: any) => {
  router.push(`/detail?id=${game.id}`);
  // play(game);
};
</script>
<template>
  <div class="mb-16">
    <div
      v-if="title"
      class="font-600 text-16 color-[#000] h-17 lh-19 ml-8 mb-8"
      @click="emits('clickTitle')"
    >
      {{ title }}
      <img
        v-if="showMore"
        class="w-16 ml-2"
        src="@/assets/img/move_up.png"
        alt=""
      />
    </div>
    <div class="flex justify-start items-start gap-x-14 overflow-x-scroll">
      <div
        class="first-of-type:ml-8 last-of-type:mr-8 flex flex-col justify-start items-center gap-y-6"
        v-for="(it, idx) in data"
        :key="idx"
        @click="jumpToDetail(it)"
      >
        <img
          :class="[size == 'normal' ? 'w-84 h-84' : 'w-68 h-68']"
          :src="getGamesImg(it.pathPicture, '1')"
          alt=""
        />
        <p
          class="font-600 text-12 color-[#000] lh-14 text-center"
          :class="[size == 'normal' ? 'w-84' : 'w-68']"
        >
          {{ it.name }}
        </p>
      </div>
    </div>
  </div>
</template>
